<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX</title>
</head>
<body>

<script>
	//AJAX:Asynchronous JavaScript and XML 表示异步发送网络请求

	/**
	 * 用form表单提交数据的缺点，一旦用户提交submit按钮，表单开始提交，
	 * 浏览器开始刷新页面，然后再新页面告诉你成功还是失败，如果由于网络
	 * 原因，还可能得到一个404。
	 * AJAX就是一种改进用户体验的一种新的技术。用户提交请求之后，浏览器
	 * 不用跳转到新的页面，这样就给用户极佳的使用感受。
	 *
	 * AJAX主要依赖XMLHttpRequest对象来实现异步请求
	 * 低版本的需要ActiveRequest对象来实现异步请求
	 */

	/**
	 * 安全限制
	 * 同源策略：表示JavaScript在发送AJAX请求的时候，URL的域名要和当前页面
	 * 要完全一致 www.example.com 和 example.com 是不同的
	 *
	 * 解决方案
	 * 1:利用Flash插件发送http请求来绕过浏览器的安全限制,但必须安装Flash，跟Flash交互起来很麻烦，现在用的少了
	 * 2:在同源域名下夹设一个代理服务器来转发,JavaScript把请求给代理服务器 '/proxy?url=http://www.sina.com.cn'
	 * 代理服务器把请求返回，这样就符合同源策略
	 * 3:JSONP
	 * 4:CORS(Cross-Origin Resource Sharing),一种跨域访问技术,默认在HTML5中是支持的
	 *  大致过程如下:
	 *  origin:表示本域,当浏览器向外域发送请求(如www.sina.com)发送请求后，回收到一个响应
	 *  浏览器会检查响应中的Access-Control-Allow-Origin中是否包含本域，如果包含则请求成功
	 *  如果不包含则请求失败。
	 *  由此可见，能够请求成功取决于服务器是否给你设置一个正确的Access-Control-Allow-Origin，
	 *  上面的这些跨域请求都是简单请求。简单请求包括
	 *  GET,HEAD,POST,POST的Content-Type仅限于application/x-www-form-urlencoded,
	 *  multipart/form-data,text/plain,不能满足自定义头 (例如:x-custom:321)
	 *  浏览器除了JavaScript,CSS之外都要验证CORS,例如引入了第三方cdn的字体时候
	 *  如果该CDN服务商未正确设置Access-Control-Allow-Origin，那么浏览器无法加载字体资源。
	 *  对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，
	 *  浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：
	 *  OPTIONS /path/to/resource HTTP/1.1
	 *  Host: bar.com
	 *  Origin: http://my.com
	 *  Access-Control-Request-Method: POST
	 *
	 *  服务器必须响应并明确指出允许的Method：
	 *  HTTP/1.1 200 OK
	 *  Access-Control-Allow-Origin: http://my.com
	 *  Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
	 *  Access-Control-Max-Age: 86400
	 *
	 *  浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，
	 *  才会继续发送AJAX，否则，抛出一个错误。
	 *
	 *  由于以POST、PUT方式传送JSON格式的数据在REST中很常见，
	 *  所以要跨域正确处理POST和PUT请求，服务器端必须正确响应OPTIONS请求。
	 */

</script>
</body>
</html>